<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
  <style>
    header a{
      text-decoration: none;
      color: #6c6c6c;
    }
    .el-table .el-table__cell{
      padding: 0;/*去掉表格中每一行自带的内边距*/
    }
  </style>
</head>
<body>
<div id="app">
  <el-container>
    <el-header height="150">
      <div style="width: 1200px;margin: 0 auto;">
        <!--vertical-align: middle 文字基于图片居中-->
        <img src="imgs/logo.png" style="width: 300px;vertical-align: middle" alt="">
        <span>
          <!--<el-divider direction="vertical"></el-divider> 竖杠-->
          <a href="">首页</a><el-divider direction="vertical"></el-divider>
          <a href="">热点资讯</a><el-divider direction="vertical"></el-divider>
          <a href="">商家入驻</a><el-divider direction="vertical"></el-divider>
          <a href="">社会招聘</a><el-divider direction="vertical"></el-divider>
          <a href="">校园招聘</a><el-divider direction="vertical"></el-divider>
          <a href="">帮助</a>
        </span>
      </div>
      <!--导航栏开始-->
      <div style="background-color: #82c8ec">
      <el-menu style="width: 1200px;margin: 0 auto"
               :default-active="1"
               class="el-menu-demo"
               mode="horizontal"
               @select="handleSelect"
               background-color="#82c8ec"
               text-color="#fff"
               active-text-color="#fff">
            <el-menu-item v-for="c in categoryArr" :index="c.id">{{c.name}}</el-menu-item>
        <div style="float: right;margin-top: 10px">
            <el-input placeholder="请输入搜素内容">
              <el-button slot="append" icon="el-icon-search"></el-button>
            </el-input>
        </div>
      </el-menu>
      </div>
      <!--导航栏结束-->
    </el-header>
        <el-main style="width: 1200px;margin: 0 auto">
          <el-row :gutter="20">
            <el-col :span="18">
              <el-carousel height="300px">
                <el-carousel-item v-for="item in bannerArr">
                  <img :src="item.url" width="100%" height="100%" alt="">
                </el-carousel-item>
              </el-carousel>
            </el-col>
            <el-col :span="6">
              <el-card style="height: 300px">
                <h3>
                  <i style="font-weight: bold" class="el-icon-trophy">销量最高</i>
                </h3>
                <el-divider></el-divider>
                <el-table :date="topArr">
                  <el-table-column type="index" label="排名" width="50"></el-table-column>
                  <el-table-column type="title" label="排名" width="80"></el-table-column>
                  <el-table-column type="saleCount" label="销量" width="80"></el-table-column>
                </el-table>
              </el-card>
            </el-col>
          </el-row>
          <!--商品列表开始-->
          <el-row :gutter="20">
            <el-col style="margin-top: 20px" :span="6" v-for="p in productArr">
              <el-card>
                <img class="p_img" :src="p.url" width="100%" height="233" alt="">
                <div>
                  <p style="font-size: 15px;height: 40px;margin-top: 0">{{p.title}}</p>
                  <div style="color: #666">
                    <span>￥{{p.price}}</span>
                    <s style="font-size: 12px">{{p.oldPrice}}</s>
                    <span style="float: right">销量:{{p.saleCount}}</span>
                  </div>
                </div>
              </el-card>
            </el-col>
          </el-row>
          <!--商品列表结束-->
        </el-main>
        <el-footer>
          <div style="height: 95px;background-image: url('imgs/wave.png')"></div>
          <div style="height: 100px;background-color: #3f3f3f;padding: 30px 0;
                      text-align: center;color: #b1b1b1">
            <p>Copyright © 北京达内金桥科技有限公司版权所有 京ICP备12003709号-3 京公网安备 11010802029572号</p>
            <p>涵盖20余门课程体系，致力于打造权威的IT职业教育学习平台</p>
            <p>达内在线WWW.TMOOC.CN 专注于IT职业技能培训</p>
          </div>
        </el-footer>
  </el-container>
</div>
</body>
<!--引入Axios框架-->
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>
  let v = new Vue({
    el: '#app',
    data: function() {
      return {
        categoryArr:[],
        bannerArr:[],
        topArr:[],
        productArr:[]
      }
    },
    methods: {
      handleSelect(key,keyPath){
        console.log(key);
      }
    },
    created:function (){
      axios.get("/category/select").then(function (response) {
        v.categoryArr=response.data
      })
      axios.get("/banner/select").then(function (response) {
        v.bannerArr=response.data
      })
      axios.get("/product/select/index").then(function (response) {
        v.productArr=response.data;
      })
    }
  })
</script>
</html>